<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>人脸录入</title>
    <style>
        /*#video,#canvas{
            !*background: deepskyblue;*!
            !*border-radius: 50%;*!
        }*/
    </style>
</head>
<body>
<!--    <video id="video" width="500px" height="500px" autoplay="autoplay"></video>-->
<!--    <canvas id="canvas" width="500px" height="500px"></canvas>-->
<!--        <img id="imgTag" src="" alt="imgTag">-->

<!--    <button onclick="openMedia()">开启摄像头</button>-->
    <video id="video" width="500px" height="500px" autoplay="autoplay"></video>
    <!--    <canvas id="canvas" width="500px" height="500px" hidden></canvas>-->
    <canvas id="canvas" width="500px" height="500px"></canvas>
<!--    <button onclick="takePhoto()">拍照</button>-->
    <!--    <img id="imgTag" src="" alt="imgTag">-->
<!--    <button onclick="closeMedia()">关闭摄像头</button>-->
    <script src="/js/jquery-3.3.1.min.js"></script>
    <script>
        /**
         * 推荐使用。
         * @type {null}
         */
        let mediaStreamTrack = null; // 视频对象(全局)
        let stream = null; // 摄像头状态。null为未开启。
        let videoStart = false;
        let video;

        window.onload = function () {
            openMedia();

            // 定时获取人脸信息。存在卡顿问题。
            setInterval(function () {
                if (videoStart === true){
                    takePhoto();
                }
            },1000);
        };

        /**
         * 打开摄像头
         */
        function openMedia() {
            // 摄像头状态。
            stream = document.getElementById('video').srcObject;
            if (stream != null){
                alert("摄像头已经开启")
                return ;
            }

            let constraints = {
                video: {width: 500, height: 500},
                audio: false
            };
            /*
            这里介绍新的方法:H5新媒体接口 navigator.mediaDevices.getUserMedia()
            这个方法会提示用户是否允许媒体输入,(媒体输入主要包括相机,视频采集设备,屏幕共享服务,麦克风,A/D转换器等)
            返回的是一个Promise对象。
            如果用户同意使用权限,则会将 MediaStream对象作为resolve()的参数传给then()
            如果用户拒绝使用权限,或者请求的媒体资源不可用,则会将 PermissionDeniedError作为reject()的参数传给catch()
            */
            //获得video摄像头
            video = document.getElementById('video');
            let promise = navigator.mediaDevices.getUserMedia(constraints);
            promise.then((mediaStream) => {
                // mediaStreamTrack = typeof mediaStream.stop === 'function' ? mediaStream : mediaStream.getTracks()[1];
                mediaStreamTrack = mediaStream.getVideoTracks()
                video.srcObject = mediaStream;
                video.play();
                videoStart = true;
            })
                // 摄像头开启失败
                .catch(function (PermissionDeniedError) {
                    console.log("摄像头开启失败");
                    console.log(PermissionDeniedError);
                });
        }

        // 拍照
        function takePhoto() {
            // 未打开摄像头。
            stream = document.getElementById('video').srcObject;
            if (stream == null){
                alert("摄像头未开启！");
                return ;
            }
            //获得Canvas对象
            let video = document.getElementById('video');
            let canvas = document.getElementById('canvas');

            let ctx = canvas.getContext('2d');
            ctx.drawImage(video, 0, 0, 300, 300);


            // toDataURL  ---  可传入'image/png'---默认, 'image/jpeg'
            let img = canvas.toDataURL();
            // 这里的img就是得到的图片
            // console.log('img-----', img);
            // document.getElementById('imgTag').src = img;//上传

            // $.ajaxSettings.async = false;   //取消异步执行
            // 人脸考勤
            $.ajax({
                url: "/faceAttendance"
                , type: "POST"
                , timeout: 5000
                , ContentType: "application/json"
                , data: {"userFace": img}
                , success: function (data) {
                    console.log("回传的数据：【人脸检测】")
                    console.log(data);
                    // document.gauges.forEach(function (gauge) {
                    //     gauge.value = data.data
                    //     console.log("获取的结果：")
                    //     console.log(gauge)
                    // });
                }, error: function (xhr,textStatus) {
                    if ("timeout" === textStatus){
                        console.log("连接超时！");
                    }else {
                        console.log("服务端异常！");
                        // console.log("xhr：");
                        // console.log(xhr);
                        console.log("textStatus："+textStatus);
                    }
                }
            });

            // $.ajaxSettings.async = true;   //取消异步执行

        }

        // 关闭摄像头
        function closeMedia() {
            // 摄像头状态。
            stream = document.getElementById('video').srcObject;

            /*若不为null*/
            if (stream != null){
                let tracks = stream.getTracks();
                tracks.forEach(function (track) {
                    track.stop();
                });
                document.getElementById('video').srcObject = null;
            }
        }
    </script>
</body>
</html>